<template>
  <!-- 整个容器 -->
  <div class="container">
    <!-- 页面头部区域 -->
    <div class="header">
      <!-- 页面标题部分 -->
      <div class="title">
        <span style="font-size: 16px; ">集市交易平台</span>
      </div>
      <!-- 用户相关操作区域 -->
      <div class="user">
        <!-- 下拉菜单组件，用于显示用户相关操作 -->
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ User.username }}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <!-- 下拉菜单内容 -->
          <el-dropdown-menu slot="dropdown">
            <!-- 个人信息菜单项，点击触发AdminInfo方法 -->
            <el-dropdown-item @click.native="AdminInfo">个人信息</el-dropdown-item>
            <!-- 切换账户菜单项，点击触发Switchover方法 -->
            <el-dropdown-item @click.native="Switchover">切换账户</el-dropdown-item>
            <!-- 退出菜单项，点击触发Exit方法 -->
            <el-dropdown-item @click.native="Exit">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!-- 链接到前台首页 -->
        <span>
          <a href="http://localhost:81/#/" target="view_window" style="color: #FFFFFF;">前台首页</a>
        </span>
      </div>
    </div>
    <!-- 页面主体部分 -->
    <div class="body">
      <!-- 左侧导航栏 -->
      <div class="navigation">
        <!-- Element UI的菜单组件，垂直方向，可折叠，背景色为浅灰色 -->
        <el-menu
          class="el-menu-vertical-demo"
          @select="handleSelect"
          :collapse="isCollapse"
          background-color="#eeeeee"
        >
          <!-- 用户管理菜单项 -->
          <el-menu-item index="1">
            <i class="el-icon-user-solid"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <!-- 商品管理菜单项 -->
          <el-menu-item index="2">
            <i class="el-icon-s-goods"></i>
            <span slot="title">商品管理</span>
          </el-menu-item>
          <!-- 订单管理菜单项 -->
          <el-menu-item index="3">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <!-- 评论管理菜单项 -->
          <el-menu-item index="4">
            <i class="el-icon-s-comment"></i>
            <span slot="title">评论管理</span>
          </el-menu-item>
          <!-- 管理员管理菜单项，仅当用户等级为1时显示 -->
          <el-menu-item index="5" v-if="User.lv==1">
            <i class="el-icon-s-custom"></i>
            <span slot="title">管理员管理</span>
          </el-menu-item>
          <!-- 网站数据统计菜单项 -->
          <el-menu-item index="6">
            <i class="el-icon-s-data"></i>
            <span slot="title">网站数据统计</span>
          </el-menu-item>
        </el-menu>
        <!-- 主体内容区域 -->
        <div class="bodyView">
          <!-- Element UI的选项卡组件，卡片类型，双向绑定TabsValue，可移除选项卡 -->
          <el-tabs v-model="TabsValue" type="card" @tab-remove="removeTab">
            <!-- 我的桌面选项卡，不可关闭 -->
            <el-tab-pane label="我的桌面" name="0" content="0" :closable="false">
              <index></index>
            </el-tab-pane>
            <!-- 动态生成的选项卡，根据editableTabs数组内容生成 -->
            <el-tab-pane
              v-for="(item, index) in editableTabs"
              :key="item.content"
              :label="item.title"
              :name="item.name"
              :closable="true"
            >
            <div class="bodys">
              <!-- 根据选项卡内容动态显示不同的子组件 -->
              <Account v-if="item.content === '1'"></Account>
              <productManage v-if="item.content === '2'"></productManage>
              <order v-if="item.content === '3'"></order>
              <Comment v-if="item.content === '4'"></Comment>
              <Adminstrator v-if="item.content === '5'"></Adminstrator>
              <Statistics v-if="item.content === '6'"></Statistics>
            </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <!-- 修改用户信息弹出层 -->
    <el-dialog
      title="修改个人信息"
      :visible.sync="dialogVisible"
      width="45%"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      >
      <div>
        <!-- 表单组件，用于修改用户信息，绑定User数据和验证规则 -->
        <el-form ref="User" :model="User" :rules="rules" label-width="120px">
          <el-row>
            <el-col :span="9" :offset="1">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="User.username" placeholder="请填写用户名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9" :offset="1">
              <el-form-item label="密码" prop="password">
                <el-input v-model.number="User.password" placeholder="请填写登录密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="9" :offset="1">
              <el-form-item label="真实姓名" prop="tname">
                <el-input v-model="User.tname" placeholder="请填写管理员姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9" :offset="1">
              <el-form-item label="联系方式" prop="phone">
                <el-input v-model="User.phone" placeholder="请填写联系方式"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10" :offset="1">
              <el-form-item label="最后登录时间" prop="logintime">
                <el-date-picker
                  v-model="User.logintime"
                  type="datetime"
                  :disabled="true"
                  >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
          </el-row>
          <el-row class="btn">
            <el-col :span="4" :offset="10">
              <el-button type="primary" @click="submitForm('User')">确认修改</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // 导入首页组件
  import index from "../components/index";
  // 导入用户管理页组件
  import Account from "../components/Account";
  // 导入商品管理页组件
  import productManage from "../components/productManage";
  // 导入订单管理页组件
  import Order from "../components/Order";
  // 导入评价管理页组件
  import Comment from "../components/Comment";
  // 导入管理员管理页组件
  import Adminstrator from "../components/Administrator";
  // 导入统计页组件
  import Statistics from "../components/Statistics";

  // 导入 moment 库，用于处理日期和时间
  import moment from "moment";

  export default {
    // 注册组件，使它们可以在模板中使用
    components: {
      index: index,
      Account: Account,
      productManage: productManage,
      Order: Order,
      Comment: Comment,
      Adminstrator: Adminstrator,
      Statistics: Statistics
    },
    data() {
      return {
        // TabsValue 用于记录当前激活的选项卡，默认显示 '0' 对应的选项卡
        TabsValue: '0',
        // editableTabs 数组用于存储动态生成的选项卡信息
        editableTabs: [],
        // tabIndex 用于生成唯一的选项卡名称
        tabIndex: 0,
        // User 对象用于存储当前用户的信息
        User: {},
        // dialogVisible 用于控制修改用户信息弹窗的显示与隐藏
        dialogVisible: false,
        // rules 对象定义了表单验证规则
        rules: {
          username: [
            {
              // 用户名是必填项
              required: true,
              message: '请输入用户名',
              trigger: 'blur'
            },
            {
              // 用户名长度需在 1 到 8 个字符之间
              min: 1,
              max: 8,
              message: '长度在 1 到 8 个字符',
              trigger: 'blur'
            }
          ],
          password: [
            {
              // 密码是必填项
              required: true,
              message: '请输入密码',
              trigger: 'change'
            }
          ]
        }
      };
    },
    created() {
      // 在组件创建时，从 Vuex 中获取用户信息并赋值给 User 对象
      this.User = this.$store.state.userInfo;
      // 如果用户 ID 为空，说明用户未登录，跳转到登录页面
      if (this.User.id == null) {
        this.$router.push('/');
      }
      // 防止用户通过浏览器后退按钮返回上一页
      history.pushState(null, null, document.URL);
      window.addEventListener('popstate', function () {
        history.pushState(null, null, document.URL);
      });
    },
    methods: {
      // 处理导航栏菜单项的选择事件
      handleSelect(key, keyPath) {
        if (key === '1') {
          // 当选择用户管理菜单项时，添加用户管理选项卡
          this.addTab("用户管理", '1');
        } else if (key === '2') {
          // 当选择商品管理菜单项时，添加商品管理选项卡
          this.addTab("商品管理", '2');
        } else if (key === '3') {
          // 当选择订单管理菜单项时，添加订单管理选项卡
          this.addTab("订单管理", '3');
        } else if (key === '4') {
          // 当选择评价管理菜单项时，添加评价管理选项卡
          this.addTab("评价管理", '4');
        } else if (key === '5') {
          // 当选择管理员管理菜单项时，添加管理员管理选项卡
          this.addTab("管理员管理", '5');
        } else if (key === '6') {
          // 当选择网站数据统计菜单项时，添加网站数据统计选项卡
          this.addTab("网站数据统计", '6');
        }
      },
      // 添加新的选项卡
      addTab(targetName, index) {
        // 生成一个唯一的选项卡名称
        let newTabName = ++this.tabIndex + '';
        // 检查该选项卡是否已经存在
        let search = this.editableTabs.find(item => item.content === index);
        if (search === undefined) {
          // 如果不存在，则添加新的选项卡
          this.editableTabs.push({
            title: targetName,
            name: index,
            content: index
          });
          // 激活新添加的选项卡
          this.TabsValue = index;
        } else {
          // 如果已存在，直接激活该选项卡
          this.TabsValue = index;
        }
      },
      // 移除选项卡
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.TabsValue;
        if (activeName === targetName) {
          // 如果要移除的是当前激活的选项卡
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              // 查找下一个或上一个选项卡
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                // 如果有下一个或上一个选项卡，则激活它
                activeName = nextTab.name;
              } else {
                // 否则激活默认选项卡
                activeName = '0';
              }
            }
          });
        }
        // 更新当前激活的选项卡
        this.TabsValue = activeName;
        // 过滤掉要移除的选项卡
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },
      // 显示个人信息修改弹窗
      AdminInfo() {
        this.dialogVisible = true;
      },
      // 切换账户，跳转到登录页面
      Switchover() {
        this.$router.push('/');
      },
      // 退出登录
      Exit() {
        // 调用后端接口更新管理员的登录时间和状态
        this.$axios.post('/Badmin/updateAdminById', {
          id: this.$store.state.userInfo.id,
          logintime: moment().format('YYYY-MM-DD HH:mm:ss'),
          status: 2
        });
        // 清空 Vuex 中的用户信息，跳转到登录页面并传递参数
        this.$router.push({
          name: 'login',
          params: { id: 1 }
        });
      },
      // 关闭修改用户信息弹窗
      closeDialog() {
        this.dialogVisible = false;
      },
      // 提交表单，添加或修改用户信息
      submitForm(User) {
        // 对表单进行验证
        this.$refs[User].validate((valid) => {
          if (valid) {
            // 如果验证通过，调用后端接口更新管理员信息
            this.$axios.post('/Badmin/updateAdminById', {
              id: this.User.id,
              tname: this.User.tname,
              username: this.User.username,
              password: this.User.password,
              phone: this.User.phone
            }).then(res => {
              if (res.data == 1) {
                // 如果更新成功，显示成功提示信息，并更新 Vuex 中的用户信息
                this.$message({
                  message: '修改成功！',
                  type: 'success'
                });
                this.$store.commit('userInfo', this.User);
              }
            });
          } else {
            // 如果验证不通过，返回 false
            return false;
          }
        });
      }
    }
  }
</script>
<style>
  /* 整个页面容器的样式 */
  .container {
    /* 设置容器高度为 100%，宽度为视口宽度 */
    height: 100%;
    width: 100vw;
    /* 设置背景颜色 */
    background-color: #f6f8fa;
  }

  /* 页面头部的样式 */
  .header {
    /* 设置头部高度 */
    height: 60px;
    /* 设置文字颜色为白色 */
    color: #FFFFFF;
    /* 设置头部背景颜色 */
    background: #2598ff;
    /* 使用 flex 布局 */
    display: flex;
    /* 垂直居中对齐 */
    align-items: center;
    /* 设置内边距 */
    padding: 0 20px;
    /* 添加阴影效果 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  /* 页面标题部分的样式 */
  .title {
    /* 宽度自适应 */
    width: auto;
    /* 设置右侧外边距 */
    margin-right: 40px;
  }

  /* 标题内文字的样式 */
  .title span {
    /* 设置字体大小 */
    font-size: 20px;
    /* 设置字体粗细 */
    font-weight: 500;
    /* 设置字母间距 */
    letter-spacing: 1px;
  }

  /* 功能图标部分的样式 */
  .func i {
    /* 设置图标字体大小 */
    font-size: 15px;
    /* 设置内边距 */
    padding: 6px;
    /* 设置鼠标指针样式为手型 */
    cursor: pointer;
    /* 设置圆角 */
    border-radius: 10%;
    /* 设置背景颜色 */
    background-color: rgba(255,255,255,0.3);
  }

  /* 功能图标悬停时的样式 */
  .func i:hover {
    /* 改变背景颜色 */
    background-color: rgba(255,255,255,0.4);
  }

  /* 用户区域的样式 */
  .user {
    /* 使用 flex 布局 */
    display: flex;
    /* 垂直居中对齐 */
    align-items: center;
    /* 设置子元素之间的间距 */
    gap: 20px;
    /* 使该区域靠右显示 */
    margin-left: auto;
  }

  /* Element UI 下拉菜单链接的样式 */
  .el-dropdown-link {
    /* 设置文字颜色为白色 */
    color: #FFFFFF;
    /* 设置字体大小 */
    font-size: 14px;
    /* 使用 flex 布局 */
    display: flex;
    /* 垂直居中对齐 */
    align-items: center;
    /* 设置子元素之间的间距 */
    gap: 5px;
    /* 设置内边距 */
    padding: 5px 10px;
    /* 设置圆角 */
    border-radius: 4px;
    /* 添加过渡效果 */
    transition: all 0.3s;
  }

  /* Element UI 下拉菜单链接悬停时的样式 */
  .el-dropdown-link:hover {
    /* 改变背景颜色 */
    background: rgba(255,255,255,0.1);
  }

  /* 非折叠状态下的垂直菜单样式 */
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    /* 设置菜单宽度 */
    width: 220px;
    /* 设置最小高度为 100% */
    min-height: 100%;
    /* 设置右侧边框 */
    border-right: 1px solid #e6e6e6;
    /* 设置背景颜色 */
    background: #fff;
  }

  /* 菜单选项的样式 */
  .el-menu-item {
    /* 设置菜单选项高度 */
    height: 50px;
    /* 设置行高 */
    line-height: 50px;
    /* 设置上下外边距 */
    margin: 4px 0;
  }

  /* 菜单选项内图标的样式 */
  .el-menu-item i {
    /* 设置图标颜色 */
    color: #666;
    /* 设置图标字体大小 */
    font-size: 18px;
    /* 设置右侧外边距 */
    margin-right: 5px;
  }

  /* 菜单选项悬停时的样式 */
  .el-menu-item:hover {
    /* 改变背景颜色 */
    background: #f0f7ff !important;
  }

  /* 激活状态下的菜单选项样式 */
  .el-menu-item.is-active {
    /* 改变背景颜色 */
    background: #e6f2ff !important;
    /* 改变文字颜色 */
    color: #1a2980 !important;
    /* 设置右侧边框 */
    border-right: 3px solid #1a2980;
  }

  /* 导航区域的样式 */
  .navigation {
    /* 使用 flex 布局 */
    display: flex;
    /* 设置高度，减去头部高度 */
    height: calc(100vh - 63vh);
  }

  /* 主体内容区域的样式 */
  .bodyView {
    /* 占据剩余空间 */
    flex: 1;
    /* 设置内边距 */
    padding: 20px;
    /* 设置背景颜色 */
    background: #f6f8fa;
  }

  /* 主体内容区域内面包屑导航的样式 */
  .bodyView .el-breadcrumb {
    /* 设置行高 */
    line-height: 60px;
  }

  /* Element UI 选项卡标签的样式 */
  .el-tabs__item {
    /* 设置选项卡标签高度 */
    height: 40px;
    /* 设置行高 */
    line-height: 40px;
  }

  /* 激活状态下的选项卡标签样式 */
  .el-tabs__item.is-active {
    /* 改变文字颜色 */
    color: #1a2980;
  }

  /* 选项卡内容区域的样式 */
  .bodys {
    /* 设置背景颜色 */
    background: #fff;
    /* 设置圆角 */
    border-radius: 8px;
    /* 添加阴影效果 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    /* 设置内边距 */
    padding: 20px;
    /* 设置顶部外边距 */
    margin-top: 10px;
  }

  /* 移动端适配，当屏幕宽度小于等于 768px 时应用以下样式 */
  @media screen and (max-width: 768px) {
    /* 头部样式调整 */
    .header {
      /* 改为垂直布局 */
      flex-direction: column;
      /* 高度自适应 */
      height: auto;
      /* 调整内边距 */
      padding: 10px;
    }

    /* 标题样式调整 */
    .title {
      /* 右侧外边距清零 */
      margin-right: 0;
      /* 底部添加外边距 */
      margin-bottom: 10px;
    }

    /* 用户区域样式调整 */
    .user {
      /* 宽度占满 */
      width: 100%;
      /* 子元素两端对齐 */
      justify-content: space-between;
    }

    /* 非折叠状态下的垂直菜单样式调整 */
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      /* 宽度占满 */
      width: 100%;
    }

    /* 导航区域样式调整 */
    .navigation {
      /* 改为垂直布局 */
      flex-direction: column;
    }

    /* 主体内容区域样式调整 */
    .bodyView {
      /* 调整内边距 */
      padding: 10px;
    }
  }
</style>